<template>
  <a-drawer
    title="收据编辑"
    :visible="visible"
    :destroyOnClose="true"
    width="60%"
    :body-style="{ padding: '0px', height: 'calc(100% - 55px)' }"
    @close="onClose"
  >
    <section class="content">
      <a-form
        layout="vertical"
        ref="formRef"
        :model="formData"
        :rules="rules"
        @finish="onSubmit"
      >
        <a-card title="收据信息" class="card-bottom">
          <a-row :wrap="true" :gutter="[12, 12]">
            <a-col :span="8">
              <a-form-item label="编号规则:">
                <a-input
                  placeholder="请输入编号规则"
                  v-model:value="formData.rulesName"
                  :disabled="true"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="收据编号:">
                <a-input
                  placeholder="请输入收据编号"
                  v-model:value="formData.receiptNumber"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="开据日期:">
                <a-date-picker
                  placeholder="请选择开据日期"
                  v-model:value="formData.issuingDate"
                  valueFormat="YYYY-MM-DD"
                  class="w-100p"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="支付方式:">
                <a-select
                  v-model:value="formData.remit_type"
                  style="width: 100%"
                  :options="paymentOptions"
                  @change="handleChange"
                  placeholder="请选择支付方式"
                  mode="multiple"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="费用类型:">
                <a-input
                  placeholder="请输入费用类型"
                  v-model:value="formData.expenseType"
                  :disabled="true"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="费用名称:">
                <a-input
                  placeholder="请输入费用名称"
                  v-model:value="formData.expenseName"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="开据金额:" name="apply_receipt_amount">
                <a-input-number
                  placeholder="请输入开据金额"
                  v-model:value="formData.apply_receipt_amount"
                  style="width: 100%"
                  @blur="receiptBlur"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="交款方" class="card-bottom">
          <a-row :wrap="true" :gutter="[12, 12]">
            <a-col :span="12">
              <a-form-item label="交款单位:" name="paymentUnit">
                <a-input
                  placeholder="请输入交款单位"
                  v-model:value="formData.paymentUnit"
                  :disabled="true"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="交款人:">
                <a-input
                  placeholder="请输入交款人"
                  v-model:value="formData.payer"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="地址:">
                <a-input
                  placeholder="请输入地址"
                  v-model:value="formData.address"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="电话:">
                <a-input
                  placeholder="请输入电话"
                  v-model:value="formData.phone"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="收款方" class="card-bottom">
          <a-row :wrap="true" :gutter="[12, 12]">
            <a-col :span="12">
              <a-form-item label="收款单位:">
                <a-select
                  v-model:value="formData.payee"
                  style="width: 100%"
                  :options="payeeOptions"
                  @change="handleChangePayee"
                  placeholder="请选择收款单位"
                >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="收款人:">
                <a-input
                  placeholder="请输入收款人"
                  v-model:value="formData.payeePeople"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="地址:">
                <a-input
                  placeholder="请输入地址"
                  v-model:value="formData.payeeAddress"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="电话:">
                <a-input
                  placeholder="请输入电话"
                  v-model:value="formData.payeePhone"
                />
              </a-form-item>
            </a-col>
          </a-row>
        </a-card>
        <a-card title="备注" class="card-bottom">
          <a-row :wrap="true" :gutter="[12, 12]">
            <a-col :span="24">
              <a-textarea
                placeholder="请输入备注内容"
                v-model:value="formData.remark"
                :auto-size="{ minRows: 2 }"
              />
            </a-col>
          </a-row>
        </a-card>
        <div class="drawer-footer">
          <a-space>
            <a-button @click.prevent="onClose">取消</a-button>
            <a-button type="primary" html-type="submit">保存</a-button>
          </a-space>
        </div>
      </a-form>
    </section>
  </a-drawer>
</template>

<script>
import {
  computed,
  defineComponent,
  reactive,
  toRaw,
  toRefs,
  watch,
  ref,
} from "vue";
import request from "@/common/utils/request";
import moment from "moment";
import { message } from "ant-design-vue";
const dateFormatStr = "YYYY-MM-DD";

export default defineComponent({
  name: "editReceipt",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Array,
      default: ()=>{
        return []
      },
    },
    content: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const today = moment();
    const formRef = ref();
    const formData = reactive({
      id: 0,
      // 收据信息
      rulesName: "",
      receiptNumber: "",
      issuingDate: today,
      remit_type: undefined,
      expenseType: "",
      expenseName: "",
      apply_receipt_amount: "",
      // 交款方
      paymentUnit: "",
      payer: "",
      address: "",
      phone: "",
      // 收款方
      payee: undefined,
      payeePeople: "",
      payeeAddress: "",
      payeePhone: "",
      // 备注
      remark: "",
    });

    // 表单验证
    const rules = {
      paymentUnit: [
        {
          required: true,
          message: "请输入交款单位",
        },
      ],
      apply_receipt_amount: [
        {
          required: true,
          message: "请输入开据金额",
        },
      ],
    };

    // 支付方式下拉框
    const paymentOptions = ref([]);
    const handleChange = (handle) => {
      console.log(handle);
    };

    // 收款单位下拉
    const payeeOptions = ref([]);
    const handleChangePayee = (content, key) => {
      formData.collection_company = key.label;
      let data = sellerAccountList.value.find((item) => item.id == key.value);
      console.log(data, "data");
      sellerAccountSet({
        collection_uname: data.company_name,
        collection_address: data.address,
        collection_phone: data.phone,
      });
    };

    // 处理收款方字段
    const sellerAccountSet = (data) => {
      formData.payeePeople = data.collection_uname;
      formData.payeeAddress = data.collection_address;
      formData.payeePhone = data.collection_phone;
    };

    // 开据金额变换
    const receiptBlur = (blur) => {
      if (formData.apply_receipt_amount <= 0) {
        message.warn("申请开据金额必须大于0");
        formData.apply_receipt_amount = formData.unreceipt_amount;
        return;
      }
      if (
        Number(formData.apply_receipt_amount) >
        Number(formData.unreceipt_amount)
      ) {
        message.warn("申请开据金额必须小于等于可开据金额");
        formData.apply_receipt_amount = formData.unreceipt_amount;
      }
    };

    const sellerAccountList = ref([]);

    // 获取编辑信息
    const getOwnerSeller = () => {
      request
        .post("/org", "/receipt/getOwnerSeller", { billIds: props.id })
        .then((res) => {
          paymentOptions.value = res.returnData.remit_type_init.map((item) => {
            return {
              value: item.key,
              label: item.name,
            };
          });
          // formData.payee=props.content.selectId
          formData.issuingDate = props.content.issuer_time || today;
          formData.id = props.content.id;
          formData.receiptNumber = props.content.receipt_number;
          formData.apply_receipt_amount = props.content.apply_receipt_amount;
          formData.unreceipt_amount = props.content.unreceipt_amount;
          formData.expenseType = props.content.cost_type_txt;
          formData.expenseName = props.content.cost_name
            ? props.content.cost_name
            : props.content.cost_type_txt;
          formData.remark = props.content.remark;
          // 收据信息
          formData.rulesName = res.returnData.receiptRule.name;
          formData.remit_type = props.content.remit_type
            ? props.content.remit_type.split(",")
            : res.returnData.remit_types;
          // 交款人
          formData.paymentUnit =
            res.returnData.owner.name || props.content.payment_company;
          formData.payer = props.content.payment_uname
            ? props.content.payment_uname
            : res.returnData.owner.contacter.name;
          formData.address = props.content.payment_address
            ? props.content.payment_address
            : res.returnData.owner.contacter.address;
          formData.phone = props.content.payment_phone
            ? props.content.payment_phone
            : res.returnData.owner.contacter.phone;
          // 收款人
          sellerAccountList.value = props.content.sellerAccount;
          payeeOptions.value = sellerAccountList.value.map((item) => {
            return {
              value: item.id,
              label: item.company_name,
            };
          });
          formData.payee = props.content.collection_company_id;
          sellerAccountSet({
            collection_uname: props.content.collection_uname,
            collection_address: props.content.collection_address,
            collection_phone: props.content.collection_phone,
          });

          let payeeData = payeeOptions.value.find(
            (payee) => payee.value == props.content.collection_company_id
          );
          formData.collection_company = payeeData.label;
        });
    };

    // 关闭
    const onClose = () => {
      context.emit("onClose");
      formRef.value.resetFields();
    };
    // 保存
    const onSubmit = () => {
      let params = { ...formData };
      params.issuingDate = moment(params.issuingDate).format(dateFormatStr);
      if(!params.remit_type){
        params.remit_type = []
      }
      context.emit("success", params);
      // console.log(formData.apply_receipt_amount);
      // formRef.value.resetFields();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getOwnerSeller();
        }
      }
    );

    return {
      onClose,
      formData,
      paymentOptions,
      handleChange,
      payeeOptions,
      formRef,
      handleChangePayee,
      onSubmit,
      rules,
      receiptBlur,
    };
  },
});
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  padding: 20px 20px 80px 20px;
  overflow: hidden auto;
  .card-bottom {
    margin-bottom: 20px;
  }
}
:deep(.ant-input-number-handler-wrap) {
  display: none;
}
</style>
